<template>
  <div class="widget-list">
    <div class="widget-title">
      <span>{{ collection.label }}</span>
    </div>
    <vue-draggable-next
      :list="items"
      tag="ul"
      v-bind="from"
      :clone="cloner(collection)"
      drag-class="drag"
      ghost-class="ghost"
      item-key="name"
    >
      <li v-for="item in items" :key="item.name" class="form-edit-widget-label">
        <span>{{ item.label }}</span>
      </li>
    </vue-draggable-next>
  </div>
</template>

<script lang="ts" setup>
  import { Collection, cloner } from './structure';
  import { computed } from 'vue';
  import { VueDraggableNext } from 'vue-draggable-next';

  const props = defineProps<{
    collection: Collection;
  }>();

  const from = computed(() => ({
    sort: false,
    group: {
      name: props.collection.name,
      // 可拖出及效果
      pull: 'clone',
      // 可拖入
      put: false
    }
  }));

  const items = computed(() => Object.values(props.collection.items) || []);
</script>

<style scoped>
  .widget-list {
    border-right: 1px solid #e0e0e0;
    overflow-x: hidden !important;
    flex-shrink: 0;
  }

  .widget-title {
    padding: 14px 12px;
    font-size: 14px;
    color: #333333;
  }

  .widget-list ul {
    list-style: none;
    position: relative;
    overflow: hidden;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #eeeeee;
    padding: 0;
  }

  .form-edit-widget-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 33.3%;
    box-sizing: border-box;
    font-size: 14px;
    height: 86px;
    color: #999999;
    border: 1px solid #eeeeee;
    cursor: move;
    margin-left: -1px;
    margin-top: -1px;
  }

  .form-edit-widget-label:nth-child(3n) {
    border-right: none !important;
  }

  .form-edit-widget-label:hover {
    color: #0099ff;
  }

  /*noinspection CssUnusedSymbol*/
  .form-edit-widget-label > .iconfont {
    font-size: 24px;
  }

  .form-edit-widget-label a {
    font-size: 12px;
  }

  /*noinspection CssUnusedSymbol*/
  .ghost {
    border-color: #795da3;
  }

  /*noinspection CssUnusedSymbol*/
  .drag {
    border-color: darkgreen;
  }
</style>
